/* Process Page Styles */
/* Process Page Styles */

.ProcessHeading {
  display: flex;
  flex-direction: row;
  gap: 7rem;
  margin-top: 3rem;
  margin-left: 3rem;
  flex-wrap: wrap;
}
.ProcessHeroText {
  max-width: 24rem;
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ProcessHeroImg {
  max-width: 588px;
  max-height: 350px;
  margin-right: 3rem;
  border-radius: 32px;
  overflow: hidden;
}
.ProcessHeading > h1 {
  padding-top: 2rem;
  margin: 0%;
}
.ProcessHeading > p {
  padding-top: 8px;
  margin: 0%;
}
.ProcessContent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
.ProcessContent > img {
  border-radius: 32px;
}
.Clay {
  display: flex;
  flex-direction: row;
  align-self: center;
  gap: 2.5rem;
  margin-top: 60px;
}

.claytext {
  max-width: 10rem;
}
.ClayImg {
  max-width: 360px;
  max-height: 240px;
  overflow: hidden;
}
.ClayImg > img {
  border-radius: 32px;
}
#claytext > h3 {
  letter-spacing: 20%;
}

.Wheel {
  display: flex;
  flex-direction: row;
  align-self: center;
  gap: 2.5rem;
  margin-top: 60px;
}
.WheelText {
  max-width: 10rem;
}
.wheelimg > img {
  max-width: 360px;
  max-height: 240px;
  border-radius: 32px;
}

.DryTrim {
  display: flex;
  flex-direction: row;
  align-self: center;
  gap: 2.5rem;
  margin-top: 60px;
}

.DryText {
  max-width: 10rem;
}
.dryimg {
  max-width: 360px;
  max-height: 240px;
  overflow: hidden;
  border-radius: 32px;
}
.ProcImg {
  max-width: 360px;
  max-height: 240px;
  overflow: hidden;
  border-radius: 32px;
}

.Firing {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.FiringBody {
  display: flex;
  flex-direction: row;
  justify-self: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 4rem;
}
.FBText {
  max-width: 30rem;
  margin-top: 80px;
}

.FBImgs {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}
.FBImgs > img {
  border-radius: 32px;
}
.KilnImg {
  border-radius: 32px;
  max-width: 150px;
  max-height: 224px;
}

.CombustionChamber > img {
  border-radius: 32px;
  max-width: 300px;
}
/* Firing Method boxes */
/* ADD Hover state
  Title of box should transition 
  to text on hover 
  
  Check Figma for refrence*/
.methods {
  display: flex;

  flex-wrap: wrap;
  margin: 3rem 3rem 0 0;
  justify-content: center;
  margin-bottom: 2rem;
}
.FireBoxes {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;
  gap: 2rem;
}
.MethodText {
  display: none;
  margin: 16px;
  max-width: inherit;
  max-height: inherit;
  transition: ease-in 0.5ms;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 224px;
  width: 312px;
  height: 250px;
  max-width: 312px;
  max-height: fit-content;
  border-radius: 16px;
  transition: all 0.5ms ease-in-out;
}
.Gas {
  min-width: 312px;
  min-height: 224px;
  max-width: fit-content;
  max-height: fit-content;
  background-color: #bb5725;
}

.Raku {
  min-height: 224px;
  min-width: 312px;
  max-width: fit-content;
  max-height: fit-content;
  background-color: #bb5725;
}
.Wood {
  min-width: 312px;
  min-height: 224px;
  max-width: fit-content;
  max-height: fit-content;
  background-color: #bb5725;
}
.box:hover .MethodText {
  display: flex;
}
.box:hover .MethodTitle {
  display: none;
  opacity: 0;
}

.glazes {
  margin: 3rem;
}
.XtraGlaze {
  display: flex;
  align-self: center;
  justify-content: center;
}
.GlazeWrapper {
  display: flex;

  flex-wrap: wrap;
  gap: 4rem;
  justify-content: center;
  align-content: center;
}
.GlazeText {
  max-width: 30rem;
}

.GlazeContent {
  max-width: 30rem;
  border-radius: 32px;
}

.GlazeImgWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 3rem;
  max-width: 90vw;
  margin-bottom: 3rem;
  align-items: center;
}

.GlazeIMG {
  overflow: hidden;

  max-width: 300px;
  max-height: 100%;
  border-radius: 32px;
}

.BakGrnd1 {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url(../ASmithCeramics/Assets/BackgrndImg3.jpg);
  background-repeat: repeat-y;
  background-size: 100vw 100vh;
  overflow-y: visible;
}

.BakGrnd2 {
  width: 100vw;
  display: inline-flex;
  justify-content: center;
  overflow-y: visible;
  background-image: url(../ASmithCeramics/Assets/backgrndImg1.jpg);

  background-repeat: no-repeat;
  background-size: 100vw 100vh;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  overflow-y: visible;
}
.BakGrnd2::before {
  content: ""; /* empty but necessary */
  position: absolute;
  background-image: url(../ASmithCeramics/Assets/backgrndImg1.jpg);
}
@media (max-width: 700px) {
  .BakGrnd1 {
    height: fit-content;
    width: 100%;
  }
}

/* Process Page MQs */

/* Tablet */
@media (max-width: 780px) {
  .Wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ProcessHeading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    margin-top: 1rem;
    gap: 1.25rem;
  }
  .ProcessHeroImg {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0%;
  }

  .FBText {
    margin: 0;
  }
  .methods {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .FireBoxes {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 500px) {
  .ProcessHeading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
  }
  .ProcessHeroText {
    max-width: 280px;
  }
  .ProcessHeroImg {
    max-width: 300px;
    align-items: center;
  }
  .ProcessContent,
  .Clay,
  .DryTrim,
  .Wheel {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .Clay,
  .DryTrim,
  .Wheel > img {
    overflow: hidden;
    max-width: 260px;
    border-radius: 32px;
  }

  .wheelimg,
  .dryimg,
  .ClayImg > img {
    max-width: 260px;
  }
  .FBText {
    max-width: 280px;
  }
  .FBImgs {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .CombustionChamber {
    max-width: 280px;
  }
  .FireBoxes {
    margin-top: 2%;
  }
  .methods {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box {
    max-width: 290px;
    max-height: fit-content;
  }
  .GlazeText {
    max-width: 280px;
  }
  .GlazeImgs1 > img {
    max-width: 280px;
    border-radius: 32px;
  }

  .GlazeImgs1 {
    padding-top: 0;
  }
  .GlazeImgWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}